<template>
	<view class="container">
		<view class="u-flex u-row-around u-font-28 f-item u-m-t-50" style="color: #0D1D36;">
			<text space="emsp" @click="yqr" :class="[currentTab == 0 ? 'qb' : '']" >已确认 {{list?list[0].length:0}}</text>
			<text space="emsp" @click="wqr" :class="[currentTab == 1 ? 'qb' : '']">未确认 {{list?list[1].length:0}}</text>
		</view>
		<view class="fgx">
		</view>
		<view  class="f-list u-flex u-row-between u-col-center u-m-b-20 u-m-t-28" v-for="(item, index) in list[currentTab]" :key="index">
			<view class="u-flex">
				<view class="qylg u-m-b-20 u-m-l-20" :style="{ backgroundImage: 'url(' +logoMask + ')' }">
					<text class="u-line-2">{{ item.username }}</text>
				</view>
				<view class="f-item u-m-l-32 u-m-b-20">
					<view class="title u-flex">
						<view class="">
							<text class="name">{{ item.username }}</text>
						</view>
					</view>
					<view class="explain u-m-t-10" v-if="currentTab == 0">
						<text class="qrsj">已确认</text>
						<text class="time">{{item.confirmTime}}</text>
					</view>				
					<view class="wqr u-m-t-10" v-else>
						<text class="wqrsm">未确认</text>
					</view>
				</view>				
			</view>
			<view class="u-m-r-30" v-if="item.id == $store.state.userInfo.id"><u-button type="primary" @click="confirm(item.id)" v-if="currentTab == 1">确认</u-button></view>
		</view>
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				reqBody:{
					id:'',
					status:1
				},
				baseUrl:this.$mConfig.baseUrl,
				logoMask: this.$mAssetsPath.logoMask,
				currentTab: 0,
				bjxm: "../../static/homepage/xmkk.png",
				list:[[],[]]
			}
		},
		onLoad(options){
			if(options.id){
				this.reqBody.id = options.id;
				this.initPage();
			}
		},
		methods:{
			initPage(){			
				this.recordConfirms(this.reqBody);
				this.recordConfirming(this.reqBody);
			},
			async confirm(id){
				
				let {code} = await this.$apis.createRecordConfirm({id:this.reqBody.id,userId:id});
				if(code == 200){
					uni.showToast({
						title:"确认操作成功"
					})
					this.initPage();
				}
			},
			async recordConfirms(reqBody){
				this.reqBody.status = 1;
				let {data} = await this.$apis.recordConfirms(reqBody);
				this.list[0] = data;
				this.$forceUpdate()
			},
			async recordConfirming(reqBody){
				this.reqBody.status = -1;
				let {data} = await this.$apis.recordConfirms(reqBody);
				this.list[1] = data;
				this.$forceUpdate()
			},
			yqr(){
				this.currentTab = 0
				this.recordConfirms(this.reqBody);
			},
			wqr(){
				this.currentTab = 1
				this.recordConfirming(this.reqBody);
			}
				
		},
		
	}
</script>

<style scoped lang="scss">
	.f-item{
		text{
			padding-bottom: 20rpx;
		}
	}
	.qb{
		padding-bottom: 20rpx;
		color: #AB61FF;
		border-bottom: 5rpx solid #AB61FF;
	}
	.fgx{
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
	}
	.f-list{
		border-bottom: 2rpx solid #DADFED;
	}
	.qylg{
		width: 102rpx;
		height: 118rpx;
		overflow: hidden;
		background-size: 100% auto;
		background-position: 0 bottom;
		background-repeat: no-repeat;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			color: #888D99;
			font-size: 22rpx;
			padding:0 5rpx;
		}
			image {
				width: 102rpx;
				height: 118rpx;
			}
			
		}
		.name{
			font-size: 30rpx;
			color: #0D1D36;
			font-weight: bold;
		}
		.explain{
			padding:0 10rpx;
			height: 39rpx;
			background-color: #DADFED;
			text-align: center;
			line-height: 39rpx;
			.qrsj{
				font-size: 26rpx;
				color: #4B9CFF;
			}
			.time{
				font-size: 26rpx;
				color: #9DA2B0;
			}
		}
		.wqr{
			width: 100rpx;
			height: 39rpx;
			background-color: #FFF5E8;
			text-align: center;
			line-height: 39rpx;
			.wqrsm{
				color: #FF9E21;
				font-size: 26rpx;
			}
		}
</style>
